<template>
  <el-dialog
    :visible.sync="visible"
    :before-close="beforeClose"
    :close-on-click-modal="false"
    append-to-body
    class="dialog-sm"
    top="30px"
    width="900px"
  >
    <div v-if="isUnionProvince">
      <gua-fee :query-id="queryId"></gua-fee>
    </div>
    <div class="page-content" v-else>
      <div class="text-right">
        <el-button size="small" class="mb-2 d-print-none" @click="handlePrint">
          <i class="fa fa-print"></i>
          打印
        </el-button>
      </div>
      <div :id="printId">
        <div class="page-print">
          <h3 class="text-center">担保费缴纳通知书</h3>
          <div class="pt-3">
            本次 {{ related.customer_name }} 需缴纳担保费： {{ entrustContract.gua_fee }}元。
          </div>

          <div class="pt-5">
            <div>户 名： {{ serviceInfo.account_name }}</div>
            <div>开户行： {{ serviceInfo.open_bank }}</div>
            <div>账 户： {{ serviceInfo.account_no }}</div>
          </div>

          <div class="pt-5 text-right">
            <div>{{ serviceInfo.gua_name }}</div>
            <div>{{ approvalFinishDate }}</div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { printA4 } from '@vimi/utils-tool'
import { mapGetters } from 'vuex'
import GuaFee from '@/credit/views/county/unionProvince/components/guaFee/Index'
export default {
  components: {
    GuaFee,
  },
  props: {
    related: {
      type: Object,
      default: () => ({}),
    },
    approvalId: String,
    visible: Boolean,
    queryId: String,
  },
  data() {
    return {
      loading: false,
      serviceInfo: {},
      tableName: 'gua_account_info',
    }
  },

  computed: {
    ...mapGetters(['entrustContract']),
    printId() {
      return `notice-prints-${this.queryId}`
    },
    approvalFinishDate() {
      return this.$utils.dateFormat(this.related.sign_register_time, 'yyyy年MM月dd日')
    },
    isUnionProvince() {
      return +this.related.gua_type === 4
    },
  },

  watch: {
    queryId: {
      handler: function () {
        this.getData()
      },
      immediate: true,
    },
  },

  created() {},
  methods: {
    getData() {
      if (!this.queryId || this.isUnionProvince) {
        return
      }
      this.loading = true
      const params = {
        'customer_related_id.eq': this.queryId,
      }
      this.$api
        .getData(this.$serviceName, this.tableName, params)
        .then(res => {
          this.serviceInfo = res?.data?.[0] ?? {}
        })
        .finally(() => {
          this.loading = false
        })
    },
    beforeClose() {
      this.$emit('update:visible', false)
    },
    handlePrint() {
      printA4(
        document.getElementById(this.printId).innerHTML,
        `
        body {font-family: SimSun;}
        .text-indent{text-indent: 2rem;}
        .page-print {
          background-color: #fefefe;
          margin: 0 auto;
          font-size: 1.4rem;
          line-height: 2;
          padding: 4rem;
          border: 1px solid gray;
        }
      `
      )
    },
  },
}
</script>
<style lang="scss" scoped>
.page-content {
  background-color: #fefefe;
  max-width: 700px;
  margin: 0 auto;
  font-size: 1.2rem;
  line-height: 2;
}
.page-print {
  padding: 3rem;
  border: 1px solid $border-color;
}
</style>
